﻿var tab_counter = 1;
var tab_new_counter = 0;
var tab_selected = 0;
var tab_title = "";
var tabs = null;
var dialog = null;



$(document).ready(function () {
    dialog = $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Save: function () {
                saveTab();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $("#tab_title").val(tab_title);
            $("#tab_title").focus();
        },
        close: function () {
            cancelTab();
        }
    });

    tabs = $("#tabs").tabs({
        show: function (event, ui) {
            if (ui.index >= tab_counter) {
                tab_title = "";
                dialog.dialog("open");
            } else {
                tab_selected = ui.index;
            }
        },
        add: function (event, ui) {
            $(ui.panel).append("<p>Content: " + ui.index + "</p>");
        }
    });
});

function saveTab() {
    tab_new_counter++;

    tab_title = $("#tab_title").val();
    tab_selected = tab_counter;
    tabs.tabs("add", "#tabs-" + (tab_counter + tab_new_counter), tab_title, tab_counter);
    tabs.tabs("select", tab_counter);
    tab_counter++;

}
function deleteTab() {
    if (tab_counter <= 1) {
        alert("There must be at least one tab!");
        return;
    }

    if (tab_selected == 0) {
        tabs.tabs("select", 1);
        tabs.tabs("remove", 0);
    } else {
        tabs.tabs("select", (tab_selected - 1));
        tabs.tabs("remove", tab_selected + 1);
    }

    tab_counter--;
}
function cancelTab() {
    tabs.tabs("select", tab_counter - 1);
}
function addTab() {
    tab_title = "";
    dialog.dialog("open");
}











// This is the class that generates the table container for the actual property group
apolloGroupProperty = function (container, name, properties) {
    this.domContainer = $(container);
    this.name = name;
    this.properties = properties || [];

    for (var i = 0; i < this.properties.length; i++) {
        if (!this.properties[i].colspan)
            this.properties[i].colspan = 1;
        else this.properties[i].colspan = parseInt(this.properties[i].colspan);

        if (!this.properties[i].rowspan)
            this.properties[i].rowspan = 1;
        else this.properties[i].rowspan = parseInt(this.properties[i].rowspan);

        this.properties[i].row = parseInt(this.properties[i].row);
        this.properties[i].col = parseInt(this.properties[i].col);
    }

    this.rows = [];

    this.reDraw();
}

apolloGroupProperty.prototype.get = function (row, column) {
    return this.rows[row].cols[column];
}
apolloGroupProperty.prototype.addRowsUntil = function (numberOfRows) {
    if (numberOfRows <= 0)
        return;

    var numberOfCells = 0;

    if (this.rows.length > 0)
        numberOfCells = this.rows[0].cols.length;

    while (this.rows.length < numberOfRows) {
        var r = { cols: [] };

        for (var i = 0; i < numberOfCells; i++)
            r.cols.push({});

        this.rows.push(r);
    }
}
apolloGroupProperty.prototype.addColsUntil = function (numberOfCols) {
    if (numberOfCols <= 0)
        return;

    for (var i = 0; i < this.rows.length; i++) {
        while (this.rows[i].cols.length < numberOfCols)
            this.rows[i].cols.push({});
    }
}
apolloGroupProperty.prototype.setBelongToProperty = function (property) {
    var parent = this.get(property.row, property.col);

    if (parent.property != null) {
        parent.comment = "Multiple properties defined for this cell. <b>"
            + property.name + "</b> was ignored!";
        return;
    }

    if (parent.belongsto != null) {
        parent.belongsto.comment = "This overrides <b>" + property.name + "</b>";
        return;
    }

    parent.property = property;


    if (property.colspan > 1) {
        for (var i = 1; i < property.colspan; i++) {
            var child = this.get(property.row, property.col + i);

            if (child.property != null || child.belongsto != null) {
                parent.comment = "Colspan reduced from " + property.colspan + " to " + i;
                property.colspan = i;
            }
            else {
                child.belongsto = parent;
            }
        }
    }

    if (property.rowspan > 1) {
        for (var j = 1; j < property.rowspan; j++) {
            var child = this.get(property.row + j, property.col);

            if (child.property != null || child.belongsto != null) {
                parent.comment = "Rowspan reduced from " + property.rowspan + " to " + j;
                property.rowspan = j;
            }
            else {
                child.belongsto = parent;
            }
        }
    }
}
apolloGroupProperty.prototype.reDraw = function () {
    this.rows = [];

    // redo the rows and columns from properties
    for (var i = 0; i < this.properties.length; i++) {
        this.addRowsUntil(this.properties[i].row + this.properties[i].rowspan);
        this.addColsUntil(this.properties[i].col + this.properties[i].colspan);

        this.setBelongToProperty(this.properties[i]);
    }

    // redraw the table
    this.domContainer.empty();

    var table = $("<table cellpadding=3 cellspacing=0 width=100%></table>");
    table.addClass("preview");

    var numberOfCells = 0;
    if (this.rows.length > 0)
        numberOfCells = this.rows[0].cols.length;

    table.append(("<tr><th colspan=" + numberOfCells + ">" + this.name + "</th></tr>"));

    for (var i = 0; i < this.rows.length; i++) {
        var tr = $("<tr></tr>");

        for (var j = 0; j < this.rows[i].cols.length; j++) {
            var cell = this.get(i, j);

            if (cell.belongsto != null)
                continue;

            var td = $("<td></td>");

            if (cell.property != null) {
                if (cell.property.colspan > 1)
                    td.attr("colspan", cell.property.colspan);
                if (cell.property.rowspan > 1)
                    td.attr("rowspan", cell.property.rowspan);

                var prop = $("<span></span>");
                prop.text(cell.property.name);

                if (cell.property.type == "ReadOnly")
                    prop.addClass("read_only");
                else if (cell.property.type == "Required")
                    prop.append("<sup>*</sup>");
                else if (cell.property.type == "Recommanded")
                    prop.append("<sup>+</sup>");

                if (cell.property.customcontrol) {
                    prop.addClass("custom_" + cell.property.customcontrol);
                    prop.append("<sub>" + cell.property.customcontrol + "</sub>");
                }

                td.append(prop);

            }
            else td.append("&nbsp;");

            if (cell.comment)
                td.append($("<i>" + cell.comment + "</i>"));

            tr.append(td);
        }

        table.append(tr);
    }

    this.domContainer.append(table);
}
